<script setup lang="ts">
import { ref, nextTick, reactive } from "vue"
import * as echarts from "echarts"
import "echarts/renderers"
import { getStatisticsTypeApi } from "@/api/billv2"

const dialog = ref(false)
const title = ref("详情")
const chartRefs = ref<any>(null)
const chartRefs2 = ref<any>(null)
const listData = ref<any[]>([])
const listKeys = ref<any[]>([])
const listTotals = ref<any[]>([])
const listCompanys = ref<any[]>([])
const totals = ref<number>(0)
const clientTotal = ref<number>(0)
const number = ref<number>(0)
const searchData = reactive({
  startTime: "",
  endTime: "",
  libraryType: 1,
  type: 1
})
const getTable = async () => {
  await getStatisticsTypeApi({
    ...searchData
  }).then((res: any) => {
    console.log("getStatisticsTypeApigetStatisticsTypeApigetStatisticsTypeApigetStatisticsTypeApi")
    console.log(res)
    listData.value = res.data.data
    listKeys.value = res.data.key
    number.value = res.data.money
    clientTotal.value = res.data.clientTotal
    totals.value = res.data.total
    listTotals.value = res.data.totalList
    listCompanys.value = res.data.companyCount
  })
}

const batchShow = async (row: any) => {
  console.log(row)
  dialog.value = true
  searchData.startTime = row.startTime
  searchData.endTime = row.endTime
  searchData.libraryType = row.libraryType
  if (row.libraryType == 1) {
    title.value = "入库详情"
  } else {
    title.value = "出库详情"
  }
  searchData.type = row.type
  await getTable()
  await nextTick(() => {
    console.log("nextTicknextTicknextTicknextTicknextTicknextTick")
    echartsInit()
  })
}

const echartsInit = () => {
  if (chartRefs.value) {
    console.log("echartsInit")
    console.log("echartsInitechartsInitechartsInitechartsInit", listData.value)
    const chartInstanceBar = echarts.init(chartRefs.value)
    const optionBar = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: listKeys.value,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          name: "单位：万元",
          type: "value",
          axisLabel: {
            show: true,
            color: "#333"
          }
        }
      ],
      series: [
        {
          name: "金额",
          type: "bar",
          data: listData.value,
          label: {
            show: true,
            position: "top"
          }
        }
      ]
    }
    chartInstanceBar.setOption(optionBar)
  }
  if (chartRefs2.value) {
    const chartInstanceBar2 = echarts.init(chartRefs2.value)
    const optionBar2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      legend: {
        orient: "horizontal",
        left: "center", // 图例居中对齐
        top: "top" // 图例在上方显示
      },
      xAxis: [
        {
          type: "category",
          data: listKeys.value,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          name: "单位：张/个",
          type: "value",
          alignTicks: true,
          axisLine: {
            show: true,
            color: "#333"
          }
        }
      ],
      series: [
        {
          name: "张数",
          type: "line",
          data: listTotals.value,
          emphasis: {
            focus: "series"
          },
          label: { show: true, position: "top" }
        },
        {
          name: "客户",
          type: "line",
          data: listCompanys.value,
          emphasis: {
            focus: "series"
          },
          label: { show: true, position: "top" }
        }
      ]
    }
    chartInstanceBar2.setOption(optionBar2)
  }
}
defineExpose({ batchShow })

/** 关闭搜索对话框 */
const handleClose = () => {
  setTimeout(() => {
    listKeys.value = []
    listData.value = []
    listTotals.value = []
    number.value = 0
    totals.value = 0
    title.value = "详情"
  }, 200)
  dialog.value = false
}
</script>

<template>
  <div>
    <el-dialog v-model="dialog" :title="title" width="80%" destroy-on-close draggable :before-close="handleClose">
      <div>总金额：{{ number }} 总张数：{{ totals }} 客户总数：{{ clientTotal }}</div>
      <div ref="chartRefs" style="height: 400px" />
      <div ref="chartRefs2" style="height: 400px" />
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
